<!--
 * @Description: 车间任务详情
 * @Author: shilinzhou
 * @Date: 2024-01-02 16:56:05
 * @LastEditors: shilinzhou
 * @LastEditTime: 2024-03-25 14:45:42
-->
<script setup lang="ts">
import { searchConfig, searchConfigCell } from './config/search-config';
import { tableConfig } from './config/table-config';
import {
    doGetShopDetailsList,
    doGetShopDetailList
} from '@/api/bulletin/shopProductionDetails/index';
import type { ShopProDetailsRecord } from '@/api/bulletin/shopProductionDetails/model/type';

defineOptions({
    name: 'ShopProductionDetails'
});

const route = useRoute();
const tableRef = ref<TableRef>();
const searchRef = ref<SearchRef>();

// 表格配置
const getDataFn = () => {
    return route.query.time ? doGetShopDetailList : doGetShopDetailsList;
};
/**
 * @: 状态返回
 */
const statusChange = (type: string) => {
    let str = '';
    options.forEach(item => {
        if (item.value === type) {
            str = item.label;
        }
    });
    return str;
};

/**
 * @: 列表勾选事件
 */
const selectIds = ref<number[]>([]);
const handleSelection = (e: ShopProDetailsRecord[]) => {
    selectIds.value = e.map(item => item.id);
};

//加工状态数据
const options = [
    { value: 'QUEUEING', label: '排队中' },
    { value: 'PROCESSING', label: '加工中' },
    { value: 'COMPLETED', label: '已完工' }
];

/**
 * @:计划加工状态
 */
const plannedProcessingStatus = ref('');
const planStatusChange = (val: string) => {
    plannedProcessingStatus.value = val;
};

/**
 * @: 车间多日任务详情参数
 */
const shopProductionDetails = computed(() => ({
    workshopId: route.query.workshopId,
    'dateRange.start': route.query.start,
    'dateRange.end': route.query.end
}));

/**
 * @: 车间单日任务详情参数
 */
const shopProductionDetail = computed(() => ({
    workshopId: route.query.workshopId,
    statDate: route.query.time
}));
</script>

<template>
    <q-page>
        <!-- 标题配置 -->
        <q-page-title class="page-title">
            车间编码: {{ route.query.workshopCode }} &nbsp;&nbsp; 车间名称:
            {{ route.query.workshopName }}&nbsp;&nbsp;&nbsp;
            <span v-if="route.query.time">日期:{{ route.query.time }}</span>
        </q-page-title>
        <!-- 搜素条件 -->
        <base-search
            ref="searchRef"
            :table-ref="tableRef"
            :search-config="route.query.time ? searchConfigCell : searchConfig"
        >
            <template #plannedProcessingStatus="{ row }">
                <el-select
                    v-model="row.plannedProcessingStatus"
                    placeholder="请选择查询方式"
                    style="width: 100%"
                    clearable
                    @change="planStatusChange"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </template>
        </base-search>
        <!-- 表格配置 -->
        <base-table
            ref="tableRef"
            :added-params="route.query.time ? shopProductionDetail : shopProductionDetails"
            :getDataFn="getDataFn()"
            :table-config="tableConfig"
            :unAction="true"
            @selection-change="handleSelection"
        >
            <!-- 计划加工状态 -->
            <template #plannedProcessingStatus="{ row }: SlotData<ShopProDetailsRecord>">
                <div>{{ statusChange(row.plannedProcessingStatus) }}</div>
            </template>
        </base-table>
    </q-page>
</template>

<style scoped lang="scss">
@include b(page-title) {
    position: relative;
    top: -14px;
    text-align: justify;
}
</style>
